/*
机构 csy 2020年10月16日10:36:10
*/
<template>
    <div>
        <div class="container">
            <div class="left-content">
                <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
                <el-tree
                    class="filter-tree"
                    :data="data"
                    :props="defaultProps"
                    node-key="id"
                    default-expand-all
                    draggable
                    :highlight-current="true"
                    :filter-node-method="filterNode"
                    @node-click="handleNodeClick"
                    ref="tree"
                ></el-tree>
            </div>
            <div class="right-content">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit1('form')">重置</el-button>
                        <el-button type="primary" @click="onSubmit2">保存</el-button>
                        <el-button type="primary" @click="onSubmit3">删除</el-button>
                    </el-form-item>
                    <!-- <div class="handle-box">
                       <el-button type="primary" @click="onSubmit1('form')">新增</el-button>
                        <el-button type="primary" @click="onSubmit2">保存</el-button>
                        <el-button type="primary" @click="onSubmit3">删除</el-button>
                    </div>-->
                    <el-form-item label="编码" prop="code">
                        <el-input v-model="form.code" class="input-class"></el-input>
                    </el-form-item>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name" class="input-class"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model="form.sort" class="input-class"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人" prop="person">
                        <el-input v-model="form.person" class="input-class"></el-input>
                    </el-form-item>
                    <el-form-item label="职责" prop="desc">
                        <el-input type="textarea" v-model="form.desc" style="width:400px"></el-input>
                    </el-form-item>
                    <el-form-item label="公司" prop="delivery">
                        <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item label="启用" prop="delivery2">
                        <el-switch v-model="form.delivery2"></el-switch>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
    data() {
        return {
            treeSelectNode: '',
            imageUrl: '',
            query: {
                pageIndex: 1,
                pageSize: 10
            },
            filterText: '',
            data: [
                {
                    id: 1,
                    label: '机构',
                    children: [
                        {
                            id: 4,
                            label: '机构1'
                        },
                        {
                            id: 5,
                            label: '机构2'
                        },
                        {
                            id: 6,
                            label: '机构3'
                        },
                        {
                            id: 7,
                            label: '机构4'
                        },
                        {
                            id: 8,
                            label: '机构5'
                        }
                    ]
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            form: {
                name: '',
                code: '',
                sort: '',
                person: '',
                delivery: true,
                delivery2: true,
                desc: ''
            }
        };
    },
    created() {},
    methods: {
        // 重置
        onSubmit1(formName) {
            console.log('form', this.$refs[formName]);
            this.$refs[formName].resetFields();
            this.$message({
                message: `${formName}'重置成功！'`,
                type: 'success'
            });
        },
        onSubmit2() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$message({
                        message: '保存成功！',
                        type: 'success'
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        onSubmit3() {
            if (this.treeSelectNode != '') {
                this.$message({
                    message: '删除成功！',
                    type: 'success'
                });
            } else {
                this.$message({
                    message: '请选择要删除的数据',
                    type: 'warning'
                });
            }
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        handleAvatarSuccess(res, file) {
            // this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            // this.imageUrl = URL.createObjectURL(file.raw);
            console.log('imageUrl', file);

            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传头像图片大小不能超过 2MB!');
            // }
            return isJPG && isLt2M;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        onChange(file, fileList) {
            console.log('change', file);
            var reader = new FileReader();
            reader.readAsDataURL(file.raw); //读取图像文件 result 为 DataURL, DataURL 可直接 赋值给 img.src
            let _this = this;
            reader.onload = function (event) {
                _this.imageUrl = event.target.result; //base64
                // console.log("base64",event.target.result);
            };
        },
        handleNodeClick(data) {
            this.treeSelectNode = data;
            console.log(data);
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    }
};
</script>

<style scoped lang="scss">
.handle-box {
    margin-bottom: 20px;
}
.input-class {
    width: 190px;
}
.container {
    display: flex;
    justify-content: left;
}
.left-content {
    width: 20%;
    height: 100%;
    margin-right: 0px;
}
.right-content {
    width: 80%;
    height: 100%;
    padding-left: 20px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<style lang="scss">
.upload-demo {
    .el-upload--text {
        width: 180px;
        height: 180px;
    }
}
</style>
